import React, {useEffect, useRef, useState} from 'react';
import '../assets/css/Userinfo.css'
import {Form, Input, Tabs , Button, Space, Table, Modal, message,Pagination } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {getFeeList,getFeeDel,getFeeDelAll} from '../apis/fee'
import {getBuildingList} from '../apis/building'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
import FeeAdd from "../components/fee/FeeAdd";
import moment from "moment";

const Fee:React.FC<any> =()=> {
    const [form] = Form.useForm();
    const [, forceUpdate] = useState({});
    const [size, ] = useState<SizeType>('small');
//表单查询
    //楼栋id
    const [options,setOptions]: any =useState([]);
    //楼栋列表
    const getBuildinglist = async ()=>{
        const res:any = await getBuildingList({}).catch()
        if(res&&res.errCode===10000){
            setOptions(res.data.list)
        }
    }
    const onFinish = (values: any) => {
        if(values.buildingid){
            setParams({...values, buildingid: values.buildingid[values.buildingid.length-1]})
        }else{
            setParams(values)
        }
    };
//表格
    //表格数据
    const [data,setDataList]: any= useState([]);
    const [params,setParams]:any = useState({
        page:1,
        psize:10,
        key:'',
        buildingid:0,
        name:'',
        houseno:'',
        mibile:'',
        begindate:'',
        enddate:'',
        state:0,
        type:'',
        admin:'',
        orderno:'',
    })
    const [loading,setLoading] = useState(true)
    const getDatalist = async ()=>{
        const res:any = await getFeeList(params).catch()
        if(res&&res.errCode===10000){
            console.log(res)
            setLoading(false)
            setDataList(res.data.list)
            setTotal(res.data.counts)
        }
    }
    //分页
    const [total,setTotal] = useState(0)
    const changePagination = (page:any,pSize:any)=>{
        setParams({...params, page, psize: pSize})
    }
    //多选
    const rowSelection = {
        onChange: (selectedRowKeys:any) => {
            setSelection(selectedRowKeys)
        },
        getCheckboxProps: (record:any) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };
    const [selectionType, ] = useState<'checkbox' | 'radio'>('checkbox');
    const [selection,setSelection] = useState([])
    //删除
    const getDataDel:any = (key:number,id?:number)=>{
        return  ()=>{
            Modal.confirm({
                title: '提示',
                icon: <ExclamationCircleOutlined />,
                content: '确定要永久删除数据吗？',
                okText: '确认',
                cancelText: '取消',
                onOk:async()=>{
                    const res:any = key===1?await getFeeDel({id:id}):await getFeeDelAll({ids:selection})
                    if(res.errCode===10000){
                        getDatalist()
                        message.success('删除成功', 10);
                    }else{
                        message.error(res.errMsg, 10);
                    }
                }
            });
        }
    }
    //添加
    const [addShow,getAddShow]= useState<any>(false)
    const [listData,setListData] = useState({})
    const getUserAdd=(val?:any)=>{
        return ()=>{
            setListData(val)
            getAddShow(true)
        }
    }
    const getFeeClose = ()=>{
        getAddShow(false)
        getDatalist()
    }
    //重置

    //数据
    const columns: ColumnsType<any> = [
        {
            title: 'id',
            dataIndex: 'id',
            align:'center',
            fixed: 'left',
        },
        {
            title: '姓名',
            dataIndex: 'userName',
            align:'center',
        },
        {
            title: '楼栋名',
            dataIndex: 'building',
            align:'center',
        },
        {
            title: '房号',
            dataIndex: 'houseno',
            align:'center',
        },
        {
            title: '联系方式',
            dataIndex: 'mobile',
            align:'center',
        },
        {
            title: '缴费类型',
            dataIndex: 'type',
            align:'center',
        },
        {
            title: '账期',
            dataIndex: 'begindate',
            align:'center',
            render:(_,record)=>(
                <div>
                    {record.begindate}-{record.enddate}
                </div>
            )
        },
        {
            title: '应缴金额（元）',
            dataIndex: 'price',
            align:'center',
        },
        {
            title: '导入时间',
            dataIndex: 'addtime',
            align:'center',
            render:(_,record)=>(
                <div>
                    {moment(record.addtime).format('YYYY-MM-DD HH:mm:ss')}
                </div>
            )
        },
        {
            title: '添加者',
            dataIndex: 'admin',
            align:'center',
        },
        {
            title: '状态',
            dataIndex: 'state',
            align:'center',
            render:(_,record)=>(
                <div>
                    {record.state===1?'未缴费':'未缴费'}
                </div>
            )
        },
        {
            title: '操作',
            align:'center',
            fixed: 'right',
            width: 180,
            render: (_, record) => (
                <Space>
                    <div className="funBtn">详情</div>
                    <div className="funBtn examine" onClick={getUserAdd(record)}>修改</div>
                    <div className="funBtn del" onClick={getDataDel(1,record.id)}>删除</div>
                </Space>
            ),
        },
    ];
    useEffect(() => {
        forceUpdate({});
        getDatalist()
        getBuildinglist()
    }, [params]);
    return (
        <div className="userinfo">
            <div className="header">
                <span className="title">缴费管理</span>
            </div>

            <div className="centnet">
                {/* 切换 */}
                <Tabs
                    defaultActiveKey="1"
                    type="card"
                    size={size}
                    items={new Array(2).fill(null).map((_, i) => {
                        const id = String(i + 1);
                        return {
                            label: `${id==='1'?'已':'未'}缴费 `,
                            key: id,
                        };
                    })}
                />
                {/*  表单  */}
                <Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish}>
                    <Form.Item label="姓名" name="name" >
                        <Input style={{width:120}}  allowClear/>
                    </Form.Item>
                    <Form.Item label="园区名称" name="key">
                        <Input style={{width:120}}  allowClear />
                    </Form.Item>
                    <Form.Item label="房号" name="houseno">
                        <Input style={{width:120}}  allowClear />
                    </Form.Item>
                    <Form.Item label="联系方式" name="mibile">
                        <Input style={{width:120}}  allowClear />
                    </Form.Item>
                    <Form.Item label="账期" name="begindate">
                        <Input style={{width:120}}  allowClear />
                    </Form.Item>
                    <Form.Item label="添加人" name="admin">
                        <Input style={{width:120}}  allowClear />
                    </Form.Item>
                    <Form.Item label="流水单号" name="orderno">
                        <Input style={{width:120}} allowClear/>
                    </Form.Item>
                    <Form.Item>
                        <Button htmlType="submit" type="primary">查询</Button>
                        <Button
                            type="primary"
                            onClick={() => {
                                form.resetFields();
                            }}
                            style={{marginLeft:10}}
                        >重置</Button>
                    </Form.Item>
                </Form>
                {/*  按钮  */}
                <div className="btnBox">
                    <div className="funBtn" onClick={getUserAdd({id:0})}>添加</div>
                    <div className="funBtn del" onClick={getDataDel(2)}>批量删除</div>
                </div>
                {/*  表格  */}
                <Table
                    className="tableBox"
                    bordered
                    loading={loading}
                    columns={columns}
                    dataSource={data}
                    pagination={false}
                    rowKey={record => record.id}
                    rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                    }}
                />
                <Pagination
                    className="Pagination"
                    total={total}
                    current={params.page}
                    defaultCurrent={params.page}
                    defaultPageSize={params.psize}
                    showSizeChanger
                    showQuickJumper
                    pageSizeOptions={[5,10,20,40]}
                    onChange={changePagination}
                    showTotal={total => `共${total}条`}
                />
            </div>
            {
                addShow &&
                <FeeAdd
                    addShow={addShow}
                    listData={listData}
                    getFeeClose={getFeeClose}
                ></FeeAdd>
            }
        </div>
    );
}

export default Fee;
